let list = document.querySelector('tbody')
let prev = document.querySelector('.prev')
let next = document.querySelector('.next')
let inp = document.querySelector('input')
let btns = document.querySelectorAll('button')
let longmao = document.querySelector('.icon-yonghu')
let tbody = document.querySelector('tbody')

// console.log(btns);

let page = 1
// console.log(list);
// 渲染数据
function render(data) {
    var str = ''
    str = data.map((item) => {
        return `
            <tr>
                <td>${item.email}</td>
                <td>${item.name}</td>
                <td>${item.phone}</td>
                <td>${item.ingroup}</td>
                <td>${item.isadmin ? '是' : '否'}</td>
                <td><span class="${item.status ? 'state' : 'staten'}">${item.status ? "正常" : "异常"}</span></td>
                <td><span class='iconfont icon-bianji'></span>&emsp;&emsp;<span class='iconfont icon-shanchu' data-phone='${item.phone}'></td>
            </tr>`
    }).join('')
    // console.log(str);
    list.innerHTML = str
}
// 发送请求
function fasong() {
    // console.log(data);
    axios.get('/user/list', { params: { page: page, count: 5 } }).then((res) => {
        // console.log(res.data.list);
        render(res.data.list)
    })
}
//默认显示第一页
fasong()
// console.log(prev);
// console.log(next);
// 点击下一页
next.onclick = function () {
    page++
    if (page >= 4) {
        page = 4
    }
    fasong()
}
prev.onclick = function () {
    page--
    if (page <= 1) {
        page = 1
    }
    fasong()
}

//搜索
function search() {
    axios.get('/user/search', { params: { searchKey: inp.value } }).then((res) => {
        console.log(res.data.list);
        render(res.data.list)
    })
}
// 点击搜索，调用搜索函数
btns[0].onclick = function () {
    search()
}
// 点击用户头像退出登录
longmao.onclick = function(){
    window.location.href = 'http://localhost:2020/登录.html' 
}
// 删除
tbody.onclick = function(e){
    // console.log(e.target.className);
    if(e.target.className == 'iconfont icon-shanchu' ){
        // console.log(11);
        axios.post('/user/delete',{phone:e.target.dataset.phone}).then((res)=>{
            console.log(res.data.list);
            render(res.data.list)
        })
    }
}